<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<TITLE>论坛--登录</TITLE>
	<Link rel="stylesheet" type="text/css" href="style/style.css"/>
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/qs.js"></script>
	<script src="js/bbs.js"></script>
</HEAD>

<BODY>
<div id="app">
	<bbs ref="b">
		<div>
			<!--      导航        -->
			<DIV>
				&gt;&gt;<B><a href="index.html">论坛首页</a></B>
			</DIV>
			<!--      用户登录表单        -->
			<DIV class="t" style="MARGIN-TOP: 15px" align="center">
				<FORM name="loginForm" action="" method="post"
					  style="display: grid; grid-template-columns: 100px 200px auto; gap: 10px; width: 600px; padding: 10px">
					<label for="">用户名</label>
					<INPUT class="input" tabIndex="1"  type="text"      maxLength="20" size="35" v-model="uname">
					<span style="color: red; text-align: left">{{unameError}}</span>
					<label for="">密　码</label>
					<INPUT class="input" tabIndex="2"  type="password"  maxLength="20" size="40" v-model="upass">
					<span style="color: red; text-align: left">{{upassError}}</span>
					<label for=""></label>
					<div>
						<select v-model="autoTime">
							<option value="">自动登录时间</option>
							<option value="1">一天</option>
							<option value="2">七天</option>
							<option value="3">一个月</option>
						</select>
						<INPUT class="btn"  tabIndex="6"  type="submit" value="登 录" @click.prevent="login">
						<INPUT class="btn"  tabIndex="6"  type="submit" value="忘记密码" @click.prevent="seekInfo">
					</div>
					<span></span>
				</FORM>
			</DIV>
			<el-dialog title="重置密码-问题" :visible.sync="dialogVisible2">
				<el-form :model="form" v-if="myinfo != null">
					<el-form-item label="问题1">
						<template v-if="myinfo.q1 == null">
							<el-form-item>暂无问题，请添加</el-form-item></template>
						<template  v-else>
							<el-form-item>{{myinfo.q1}}</el-form-item></template>
					</el-form-item>

					<el-form-item label="答案1" >
						<template v-if="myinfo.q1 == null"></template>
						<template v-else>
							<el-input v-model="form.a1" autocomplete="off"></el-input>
							<span style="color: crimson">{{error1}}</span></template>
					</el-form-item>

					<el-form-item label="问题2" >
						<template v-if="myinfo.q2 == null">
							<el-form-item>暂无问题，请添加</el-form-item>
						</template>
						<template  v-else>
							<el-form-item>{{myinfo.q2}}</el-form-item></template>
					</el-form-item>

					<el-form-item label="答案2" >
						<template v-if="myinfo.q2 == null"></template>
						<template v-else><el-input v-model="form.a2" autocomplete="off"></el-input>
							<span style="color: crimson">{{error2}}</span></template>
					</el-form-item>

					<el-form-item label="问题3" >
						<template v-if="myinfo.q3 == null">
							<el-form-item>暂无问题，请添加</el-form-item></template>
						<template  v-else>
							<el-form-item>{{myinfo.q3}}</el-form-item></template>
					</el-form-item>

					<el-form-item label="答案3" >
						<template v-if="myinfo.q3 == null"></template>
						<template v-else><el-input v-model="form.a3" autocomplete="off"></el-input>
							<span style="color: crimson">{{error3}}</span></template>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="confirmq()">确 定</el-button>
				</div>
			</el-dialog>
			<!-- Form 重置密码 -->
			<el-dialog title="重置密码" :visible.sync="dialogVisible3">
				<el-form :model="form">
					<el-form-item label="重置密码">
						<el-input v-model="upass" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible3 = false">取 消</el-button>
					<el-button type="primary" @click.prevent="resetp">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</bbs>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			uname:"",
			upass:"",
			unameError:"",
			upassError:"",
			dialogVisible2:false,
			dialogVisible3:false,
			myinfo:'',
			error1:'',
			error2:'',
			error3:'',
			form:{
				a1:'',
				a2:'',
				a3:'',

			},
			autoTime:''
		},
		created() {
			this.autoLogin();
		},
		methods : {
			login(){
				// @click.prevent 抑制默认行为
				let p = new URLSearchParams();
				p.append("uname",this.uname);
				p.append("upass",this.upass);
				p.append("autoTime",this.autoTime)
				axios.post("user/login", p).then(res=>{
					this.unameError = "";
					this.upassError = "";
					if(res.data.code === 1){
						if(res.data.data.role === "user"){
							this.$message("登录成功！");
							this.$refs.b.myinfo = res.data.data;
							/*if(this.autoTime==null||this.autoTime==""){
								//	window.location.href = "index.html";
							}else {
								axios.post("user/auto", p).then(res => {
								})
							}*/
							if(res.data.data.requestURI){
								location.href=res.data.data.requestURI;
							} else {
								location.href="index.html";
							}
						}else{
							this.$message("登录成功！");
							this.$refs.b.myinfo = res.data.data;
							location.href = "back/index.html";
						}

					} else {
						// this.$alert("登录失败！");
						console.info(res.data.data);
						res.data.data.forEach(err=>{
							if (err.field == "uname") {
								this.unameError += err.defaultMessage + "; ";
							} else if (err.field == "upass") {
								this.upassError += err.defaultMessage + "; ";
							}
						});
					}
				});
			},
			seekInfo(){
				let p = new URLSearchParams();
				p.append("uname",this.uname);
				axios.post("user/seekInfo",p).then(res=>{
					if (res.data.code != 200){
						alert(res.data.msg);
						return;
					}else{
						this.myinfo=res.data.data;
						this.dialogVisible2 = true;
					}
				});
			},
			resetp(){
				let p = new URLSearchParams();
				p.append("upass",this.upass);
				axios.post("user/resetp",p).then(res=>{
					console.log(res.data.data.uname);
					if (res.data.code != 200){
						alert(res.data.msg);
						return;
					}else{
						this.dialogVisible3 = false;
						alert(res.data.msg);
					}
				});
			},
			confirmq(){
				let p = new URLSearchParams();
				p.append("uname",this.uname);
				if (this.form.a1 !== ""){
					p.append("a1",this.form.a1);
				}
				if (this.form.a2 !== ""){
					p.append("a2",this.form.a2);
				}
				if (this.form.a3 !== ""){
					p.append("a3",this.form.a3);
				}
				axios.post("user/confirmq",p).then(res=>{
					console.log(typeof(this.form.a1),this.form.a1);
					this.error1="";this.error2="";this.error3="";
					if (this.form.a1 === "" && this.form.a2 === "" && this.form.a3 === ""){
						alert("未设置问题");
					}else{
						if (res.data.code == 200) {
							if (this.form.a1 === this.myinfo.a1 && this.form.a2 === this.myinfo.a2 && this.form.a3 === this.myinfo.a3) {
								this.myinfo = res.data.data;
								this.dialogVisible3 = true;
								this.dialogVisible2 = false;
							}
							if (this.form.a1 !== this.myinfo.a1) {
								this.error1 = "回答错误";
							}
							if (this.form.a2 !== this.myinfo.a2) {
								this.error2 = "回答错误";
							}
							if (this.form.a3 !== this.myinfo.a3) {
								this.error3 = "回答错误";
							}
						}
					}
				});
			},
			autoLogin(){
				console.log("--------------------------------")
				if(document.cookie==null||document.cookie==""){
					return;
				}else{
					let usertext=document.cookie.split(";");
					let uname=usertext[0].split("=")[1];
					let upass=usertext[1].split("=")[1];
					console.log(uname+"--------"+upass)
					this.uname=uname;
					this.upass=upass;
					this.login();
				}

			},
		}
	});
</script>
</BODY>
</HTML>